<template>
  <div class="bigbox">
    <div id="main" ref="chartDom" style="width: 100%; height: 700px"></div>
  </div>
</template>

<script setup>
import { goodsList } from "@/api/userdata.js"
import { onMounted, ref } from "vue";
import * as echarts from "echarts";


goodsList()
  .then((res) => {
    // console.log(res,"--- goodsList")
  })
  .catch((err) => {
    console.log("error");
  });



const chartDom = ref(null);
let myChart = null;
const xdata=['小米10',"阿吉豆","鸿星尔克篮球鞋","华为折叠手机","小ck","iphone","小包包","荣耀30",'34英寸4k1','智能跟随行李箱','回力帆布鞋','羽绒服']
const ydata1=[533,200,322,432,550,454,678,876,456,374,665,789]
const ydata2=[55,20,522,452,350,44,78,626,46,54,605,79]
let option;
option = {
  title: {
    text: "商品排行-TOP12",
    top: "2%",
    left: "3%",
    textStyle: {
      fontSize: 20,
      color: "black",
    },
  },
  xAxis: {
    type: "category",
    data: xdata,
    axisTick:{
      show:true,
      alignWithLabel:true,
    },
    axisLabel:{
      show:true,
      alignWithLabel:true,
      interval:0
    }
  },
  yAxis: {
    type: "value",
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.3)",
    borderWidth: 0,
    textStyle: {
      color: "#fff",
    },
  },
  legend: {
    top:'3%',
    data: ["订单数",'支付数'],
  },
  series: [
    {
      name:'订单数',
      data: ydata1,
      type: "bar",
      symbol: "none",
      radius: ["100%"],
      width: "100%",
      hight: "100%",
      itemStyle: {
        color: "#ff6a6c",
      },
    },
    {
      name:'支付数',
      data: ydata2,
      type: "bar",
      symbol: "none",
      radius: ["100%"],
      width: "100%",
      hight: "100%",
      itemStyle: {
        color: "#f5a3a5",
      },
    },
  ],
};

onMounted(() => {
  myChart = echarts.init(chartDom.value);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 让图例大小随窗口变化自适应
  window.addEventListener("resize", () => {
    if (myChart) {
      myChart.resize();
    }
  });
});
</script>

<style lang="less" scoped>
.bigbox {
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 20px;
}
</style>
